import React, { useEffect } from "react";
import './ClassifyImg.css'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { useState } from "react";

const ClassifyImg = () => {
    // const { classifyImg } = props
    const [classifyImg ] = useState([
        {
            "id": 1,
            "picUrl": "https://p0.meituan.net/linglong/8e0302b7f06881a8bead719c555b1421151883.png",
            "linkUrl": "http://localhost:3000/my"
        },
        {
            "id": 2,
            "picUrl": "https://p1.meituan.net/linglong/bc2c5da4d29b2ecb5563d5f3278a4a54433365.gif",
            "linkUrl": "http://localhost:3000/my"
        },
        {
            "id": 3,
            "picUrl": "https://img.meituan.net/groceryimages/a1a3a837148d7f589af16e99cb56914b100958.png",
            "linkUrl": "http://localhost:3000/my"
        },
    ])
    useEffect(() => {
        setTimeout(() => {
            let swiper = new Swiper('.swiper-container', {
                loop: true,
                autoplay: {
                    delay: 2000
                },
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true
                }
            })
            // swiper.
        }, 1000)
    }, [])
    return (
        <div className="rotation-box">
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    {
                        classifyImg.map((item, index) => {
                            return (
                                <div
                                    key={index}
                                    className="swiper-slide">
                                    <a href={item.linkUrl}>
                                        <img className="rotationChart-img"
                                            src={item.picUrl} alt="" />
                                    </a>
                                </div>
                            )
                        })
                    }
                    {/* <div className="swiper-slide">
                        <a href="http://localhost:3000/home/my">
                        <img className="rotationChart-img" src='https://p0.meituan.net/linglong/8e0302b7f06881a8bead719c555b1421151883.png' id="1" alt="" />
                        <img className="rotationChart-img" src='https://p1.meituan.net/linglong/bc2c5da4d29b2ecb5563d5f3278a4a54433365.gif' id="2" alt="" />
                        <img className="rotationChart-img" src='https://img.meituan.net/groceryimages/a1a3a837148d7f589af16e99cb56914b100958.png' id="3" alt="" />
                        </a>
                    </div> */}
                </div>
                <div className="swiper-pagination"></div>
            </div>
        </div>
    )
}

export default ClassifyImg